/**
 * 注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购物车设置数字徽标。
 * 自定义 mixin，用来设置购物车 tabBar 数字徽标
 */

// 按需导入 mapGetters 这个辅助方法
import {mapGetters} from "vuex";

// 导出一个 mixin 对象
export default {
    computed: {
        // 将 m_cart 模块中的 total 映射为当前页面的计算属性
        ...mapGetters('m_cart', ['total'])
    },
    // 在 mixin 中使用 watch 选项
    watch: {
        // 监听 total 值的变化
        total(newValue) {
            // 在 total 发生变化时执行的操作。调用 methods 中的 setBadge 方法，重新为 tabBar 的数字徽章赋值
            this.setBadge();
        },
    },
    onShow() {
        // 在页面刚展示的时候，设置数字徽标
        this.setBadge();
    },
    methods: {
        // 设置数字徽标
        setBadge() {
            // 如果购物车为空则去除购物车的徽标
            if(this.total === 0) {
                uni.removeTabBarBadge({
                    index: 2
                });
                return;
            }
            // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
            uni.setTabBarBadge({
                index: 2,                   // tabBar 的索引
                text: this.total + ''       // 注意：text 的值必须是字符串，不能是数字
            });
        }
    }
}
